<template>
  <a-modal
    v-model:open="visible"
    title="应用部署"
    :footer="null"
    width="500px"
    :closable="!deploying"
    :mask-closable="!deploying"
  >
    <div class="deploy-content">
      <!-- 部署中状态 -->
      <div v-if="deploying" class="deploy-loading">
        <a-spin size="large" />
        <p class="deploy-text">正在部署应用，请稍候...</p>
        <div class="deploy-progress">
          <a-progress :percent="progress" :show-info="false" />
          <p class="progress-text">{{ progressText }}</p>
        </div>
      </div>

      <!-- 部署成功状态 -->
      <div v-else-if="deployResult && deployResult.success" class="deploy-success">
        <div class="success-icon">
          <CheckCircleOutlined style="color: #52c41a; font-size: 48px" />
        </div>
        <h3>网站部署成功！</h3>
        <p>你的网站已经成功部署，可以通过以下链接访问：</p>
        <div class="deploy-url">
          <a-input :value="deployResult.url" readonly>
            <template #suffix>
              <a-button type="text" @click="copyUrl">
                <CopyOutlined />
              </a-button>
            </template>
          </a-input>
        </div>
        <div class="deploy-actions">
          <a-button type="primary" @click="openUrl">访问网站</a-button>
          <a-button @click="handleClose">关闭</a-button>
        </div>
      </div>

      <!-- 部署失败状态 -->
      <div v-else-if="deployResult && !deployResult.success" class="deploy-error">
        <div class="error-icon">
          <CloseCircleOutlined />
        </div>
        <h3>部署失败</h3>
        <p class="error-message">{{ deployResult.message || '部署过程中发生错误，请稍后重试' }}</p>
        <div class="deploy-actions">
          <a-button type="primary" @click="handleRetry" size="large">
            <ReloadOutlined />
            重新部署
          </a-button>
          <a-button @click="handleClose" size="large"> 关闭 </a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  CopyOutlined,
  ReloadOutlined,
} from '@ant-design/icons-vue'

interface DeployResult {
  success: boolean
  url?: string
  message?: string
}

interface Props {
  open?: boolean
  deploying?: boolean
  result?: DeployResult | null
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
  deploying: false,
  result: null,
})

const emit = defineEmits<{
  'update:open': [value: boolean]
  retry: []
}>()

const visible = ref(false)
const progress = ref(0)
const progressText = ref('准备部署...')

// 部署结果
const deployResult = ref<DeployResult | null>(null)

// 监听外部传入的open状态
watch(
  () => props.open,
  (newVal) => {
    visible.value = newVal
    if (newVal) {
      resetState()
    }
  },
)

// 监听内部visible状态变化
watch(visible, (newVal) => {
  emit('update:open', newVal)
})

// 监听部署状态
watch(
  () => props.deploying,
  (newVal) => {
    if (newVal) {
      startProgress()
    } else {
      stopProgress()
    }
  },
)

// 监听部署结果
watch(
  () => props.result,
  (newVal) => {
    deployResult.value = newVal
  },
)

// 重置状态
const resetState = () => {
  progress.value = 0
  progressText.value = '准备部署...'
  deployResult.value = null
}

// 开始进度条动画
const startProgress = () => {
  const steps = [
    { percent: 20, text: '正在打包代码...' },
    { percent: 40, text: '正在上传文件...' },
    { percent: 60, text: '正在配置服务器...' },
    { percent: 80, text: '正在启动服务...' },
    { percent: 95, text: '正在验证部署...' },
  ]

  let currentStep = 0
  const interval = setInterval(() => {
    if (currentStep < steps.length && props.deploying) {
      progress.value = steps[currentStep].percent
      progressText.value = steps[currentStep].text
      currentStep++
    } else {
      clearInterval(interval)
      if (props.deploying) {
        progress.value = 100
        progressText.value = '部署完成'
      }
    }
  }, 1000)
}

// 停止进度条动画
const stopProgress = () => {
  progress.value = 100
  progressText.value = '部署完成'
}

// 复制URL
const copyUrl = async () => {
  if (deployResult.value?.url) {
    try {
      await navigator.clipboard.writeText(deployResult.value.url)
      message.success('链接已复制到剪贴板')
    } catch {
      // 降级方案
      const textArea = document.createElement('textarea')
      textArea.value = deployResult.value.url
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
      message.success('链接已复制到剪贴板')
    }
  }
}

// 打开URL
const openUrl = () => {
  if (deployResult.value?.url) {
    window.open(deployResult.value.url, '_blank')
  }
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
}

// 重新部署
const handleRetry = () => {
  emit('retry')
  resetState()
}
</script>

<style scoped>
.deploy-content {
  text-align: center;
  padding: 20px 0;
}

.deploy-loading {
  padding: 20px 0;
}

.deploy-text {
  margin: 20px 0;
  font-size: 16px;
  color: #666;
}

.deploy-progress {
  margin-top: 24px;
}

.progress-text {
  margin-top: 8px;
  font-size: 14px;
  color: #999;
}

.deploy-success {
  text-align: center;
  padding: 24px;
}

.success-icon {
  margin-bottom: 16px;
}

.deploy-success h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
}

.deploy-success p {
  margin: 0 0 24px;
  color: #666;
}

.deploy-url {
  margin-bottom: 24px;
}

.deploy-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.deploy-error {
  padding: 20px 0;
}

.error-icon {
  font-size: 64px;
  color: #ff4d4f;
  margin-bottom: 16px;
}

.deploy-error h3 {
  color: #ff4d4f;
  margin-bottom: 16px;
  font-size: 20px;
}

.error-message {
  margin-bottom: 24px;
  color: #666;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .deploy-actions {
    flex-direction: column;
  }

  .deploy-actions .ant-btn {
    width: 100%;
  }
}
</style>
